<template>
<div id="balance" class="bg-assist">
	<sub-page-header class="header linear-gradient">
		<router-link to="/me/money-logs" tag="span" slot="right">资金明细</router-link>
	</sub-page-header>
	<div class="linear-gradient balance-header">
		<div class="text-center">
			<p>账户可用余额</p>
			<p style="font-size: 20px;">{{balance}}</p>
		</div>
	</div>
	<div class="recharge">
		<div class="title">我要充值</div>
		<div class="content">
			<div class="line text-assist">
				请输入选择金额({{song.map(function (item) {return '充'+item.value+'送'+item.value1;}).join(' ')}})
			</div>
			<div class="line">
				<el-radio-group v-model="rechargeFee" >
					<el-radio-button class="item" v-for="(item, index) in song" :key="index" :label="item.value" >{{item.value}} 英镑</el-radio-button>
				</el-radio-group>
			</div>
			<div class="text-center">
				<el-button type="danger" @click="recharge">立即充值</el-button>
			</div>
			
		</div>
	</div>
	<div class="bottom-margin"></div>
</div>
</template>

<script>
import api from '~/api/api.js';
import SubPageHeader from '~/components/SubPageHeader.vue';

export default {
	components: {
		SubPageHeader
	},
	props: {
		balance: [Number, String]
	},
	created () {
		api.get('/user/info')
		.then(response => {
			this.balance = response.data.balance;
			this.song = response.data.song;
		})
		.catch(error => {
			this.$message.error('加载失败');
		});
	},
	data () {
		return {
			// 显示选择器
			song: [],
			balance: 0.0,
			pickerShow: 0,
			rechargeFee: '',
			drawcashFee: '',
			banks: [
				{
					currentIndex: 0,
					flex: 12,
					list: {
						'0': '请选择银行'
					},
					textAlign: 'center',
					onClick: this.bankSelect
				}
			],
			bank: 0,
			card_no: '',
			name: '',
			mobile: ''
		}
	},
	methods: {
		bankSelect (gIndex, iIndex) {

		},
		recharge () {
			api.post('/user/recharge', {
				money: this.rechargeFee
			})
			.then(response => {
				window.location.href = 'http://test.rcbao-online.com/api/recharge/index/'+response.data.id;	
			});
		},
		drawcash () {
			if (!this.bank) {
				return this.$message.warning('请选择银行');
			}
			if (!this.card_no) {
				return this.$message.warning('请输入银行卡号');
			}
			if (!this.name) {
				return this.$message.warning('请输入姓名');
			}
			if (!this.mobile) {
				return this.$message.warning('请输入电话号码');
			}
			let vue = this;
			api.post('/user/withdrawals', {
				bank: this.bank,
				card_no: this.card_no,
				name: this.name,
				mobile: this.mobile,
				money: this.drawcashFee
			})
			.then(function (response) {
				vue.$message.success('提现申请成功，请耐心等待处理');
			})
			.catch(function (error) {
				vue.$message.error(error.err);
			});
		}
	}
}
</script>

<style scoped>
#sub-page-header.header {
	border-bottom: none;
}
.linear-gradient {
    background: -webkit-linear-gradient(left, #c8182b , #d54025);
    background: -o-linear-gradient(right, #c8182b, #d54025);
    background: -moz-linear-gradient(right, #c8182b, #d54025);
    background: linear-gradient(to right, #c8182b , #d54025);
    color: #fff;
}
.balance-header {
    padding: 20px;
    margin-bottom: 15px;
}

.recharge {
	padding-bottom: 20px;
}

.recharge, .drawcash{
	background-color: #fff;
	margin-bottom: 15px;
}

.recharge .title, .drawcash .title {
	padding: 10px;
	border-bottom: 1px solid #eaeaea;
}

.recharge .content .line, .drawcash .content .line {
	padding: 10px;
}
.line:after {
	content: "";
	clear: both;
	display: table;
}

.drawcash .line {
	min-width: 200px;
	outline: none;
	text-align: right;
	border: none;
}

.line .item+.item {
	margin-left: 10px;
	border-radius: 3px;
}

.picker {
	position: fixed !important;
	bottom: 0px;
	left: 0px;
	width: 100%;
}
</style>

<style>
	.recharge .line .item .el-radio-button__inner{
		border: 1px solid #bfcbd9;
		border-radius: 4px;
	}
</style>